<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单管理table</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../layer/theme/default/layer.css">
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../layer/mobile/layer.js"></script>
<style type="text/css">
.layui-table{
	width:100%;
}
.layui-table-header{
	width:100%;
}
</style>
</head>
<body style="background:#EEEEEE">
<div style="padding:10px;"><button class="layui-btn layui-btn-normal" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe654;</i>订单管理</button>
<button id="f5" type="button" class="layui-btn layui-btn-primary" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe9aa;</i></button>
<span style="color:#909090">（未显示数据是接口异常，请尝试刷新）</span>
</div>
<table class="layui-hide" id="test" lay-filter="demo"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn layui-btn-xs" lay-event="isok">确认</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 

<script src="../layui/layui.all.js"></script>
<script src="../layui/lay/modules/layer.js"></script>
<script>
layui.config({
  version: '1534457846312' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
  
  //执行一个 table 实例
  table.render({
    elem: '#test'
    ,method:'post'
	,dataType:'json'
    ,url: 'a.ordershow' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'Oser_num', title: '订单序号', width:120, sort: true, fixed: 'left'}
      ,{field: 'O_Cid', title: '订单归属客户ID', width:160}
      ,{field: 'Oid', title: '订单编号', width:100}
      ,{field: 'Ogenerdate', title: '订单生成时间', width:200, sort: true} 
      ,{field: 'Omoney', title: '订单金额', width: 120, sort: true}
      ,{field: 'Ostate', title: '订单状态', width: 120, sort: true}
      ,{field: 'O_cname', title: '订单商品名', width: 180}
      ,{field: 'O_Scom_quan', title: '订单商品数量', width: 150}
      ,{field: 'OleaveM', title: '订单留言', width: 180}
      ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){} 
    else if(layEvent === 'del'){
		layer.confirm('真的要删除么', function(index){
			$.ajax({
	    		type: "get",
	    		url: "a.orderdelete",
	    		dataType: 'json',
	    		data: {"orderid": data.O_Cid},
				success:function(data){
					alert(data);
				}
			})
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	      });
    } else if(layEvent === 'isok'){
    	$.post("a.isok",{"orderid":data.Oid},function(data){
    		if(JSON.parse(data).code=="0000"){
    			layer.msg("确认发货完成！");
    			alert("确认发货完成！");
    		}else{
    			layer.msg("操作失败，请重试!");
    			alert("操作失败，请重试!");
    		}
    		
    		})
    	}
  });

  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
  });

});
</script>
<script type="text/javascript">
	$(function(){
		$("#f5").click(function(){
			location.href="order.html";
		})
	})
</script>
</body>
</html>        
